<template>
  <div>
    <el-container>
      <el-header hight="80px">
        <div class="logo">
          <img src="@/assets/logo.png" alt="" />
        </div>
        <div class="user">
          <el-avatar
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          ></el-avatar>
          <p>欢迎您，{{ loginName }}</p>
          <div class="layout" @click="layout">
            <el-link
              >退出<i title="退出登录" class="el-icon-caret-bottom"></i>
            </el-link>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="180px">
          <el-scrollbar class="page-scroll">
            <el-menu
              router
              :default-active="this.$route.path"
              class="el-menu-vertical-demo"
              active-text-color="#5f84ff"
              @open="handleOpen"
              @close="handleClose"
            >
              <el-menu-item index="/home">
                <i class="iconfont icon-home"></i>
                <span slot="title">帝可得</span>
              </el-menu-item>
              <el-submenu index="">
                <template slot="title">
                  <i class="iconfont icon-task"></i>
                  <span>工单管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/task/business">运营工单</el-menu-item>
                  <el-menu-item index="/task/operation">运维工单</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <i class="iconfont icon-gps"></i>
                  <span>点位管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="3-1">区域管理</el-menu-item>
                  <el-menu-item index="3-2">点位管理</el-menu-item>
                  <el-menu-item index="3-2">合作商管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="4">
                <template slot="title">
                  <i class="iconfont icon-vm"></i>
                  <span>设备管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="4-1">设备管理</el-menu-item>
                  <el-menu-item index="4-2">设备状态</el-menu-item>
                  <el-menu-item index="4-2">设备类型管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="5">
                <template slot="title">
                  <i class="iconfont icon-user"></i>
                  <span>人员管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="5-1">人员管理</el-menu-item>
                  <el-menu-item index="5-2">人效统计</el-menu-item>
                  <el-menu-item index="5-2">工作量列表</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="6">
                <template slot="title">
                  <i class="iconfont icon-sku"></i>
                  <span>商品管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="6-1">商品类型</el-menu-item>
                  <el-menu-item index="6-2">商品管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-menu-item index="7">
                <i class="iconfont icon-policy"></i>
                <span slot="title">策略管理</span>
              </el-menu-item>
              <el-menu-item index="8">
                <i class="iconfont icon-order"></i>
                <span slot="title">订单管理</span>
              </el-menu-item>
              <el-menu-item index="9">
                <i class="iconfont icon-report"></i>
                <span slot="title">对账统计</span>
              </el-menu-item>
            </el-menu>
          </el-scrollbar>
        </el-aside>
        <el-main><router-view /></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { getUserName, delToken } from '@/utils/storage'
export default {
  name: 'LayoutIndex',
  data () {
    return {
      loginName: getUserName()
    }
  },
  methods: {
    layout () {
      console.log('退出')
      // 删掉token
      delToken()
      this.$store.commit('user/setUserToken', '')
      // 退回登录页
      this.$router.push('/login')
    },
    handleOpen (key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      // console.log(key, keyPath)
    }
  }
}
</script>
<style lang="scss" scoped>
.el-header {
  position: fixed;
  width: 100%;
  z-index: 999;
  background-image: url(~@/assets/banner.png);
  padding-top: 10px;
  height: 60px;
  .logo {
    float: left;
    width: 88px;
    height: 36px;

    img {
      width: 100%;
      height: 100%;
    }
  }
  .user {
    overflow: hidden;
    height: 60px;
    float: right;
    text-align: center;
    .el-avatar {
      float: left;
    }
    p {
      float: left;
      height: 60px;
      margin: 0 15px;
      line-height: 44px;
      color: #fff;
    }
    .layout {
      float: right;
      height: 60px;
      margin: 0 15px;
      line-height: 35px;
    }
    .el-link {
      font-size: 18px;
      color: #fff;
      font-weight: 500;
    }
  }
}
.el-main {
  margin-top: 60px;
}
.el-aside {
  overflow: hidden;
  margin-top: 60px;
  .el-scrollbar {
    height: 100%;
    ::v-deep .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    ::v-deep .el-scrollbar__bar {
      display: none;
    }
    li {
      color: #000;
      .iconfont {
        margin-right: 15px;
      }
    }
  }
}
::-webkit-scrollbar {
  width: 0 !important;
  /*滚动条宽度*/
  height: 7px;
  /*滚动条高度*/
  background-color: rgb(0, 12, 46);
}
</style>
